<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>bootstrap table分页数据表格</title>
	<link href="css/bootstrap.css" rel="stylesheet" />
	<link href="dist/bootstrap-table.css" rel="stylesheet" />
	<script src="js/jquery-3.2.1.min.js"></script>
	<script src="js/bootstrap.js"></script>
	<script src="dist/bootstrap-table.min.js"></script>
	<script src="dist/locale/bootstrap-table-zh-CN.min.js"></script>
	<style>
		body {
			padding-top: 50px;
			padding-bottom: 40px;
			color: #5a5a5a;
		}

		/* 下面是左侧导航栏的代码 */
		.sidebar {
			position: fixed;
			top: 51px;
			bottom: 0;
			left: 0;
			z-index: 1000;
			display: block;
			padding: 20px;
			overflow-x: hidden;
			overflow-y: auto;
			background-color: #ddd;
			border-right: 1px solid #eee;
		}

		.main {
			padding: 20px;
		}

		.main .page-header {
			margin-top: 0;
		}
	</style>
</head>

<body>
	<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
	</nav>
	<!—自适应布局-->
		<div class="container-fluid">
			<div class="row">
				<!—左侧导航栏-->
					<div class="col-sm-3 col-md-2 sidebar"></div>
					<!—右侧管理控制台-->
						<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
							<h1 class="page-header">分页示例</h1>
							<div class="row">
								<div class="col-md-9">
									<div class="panel panel-primary">
										<div class="panel-heading">
											<h3 class="panel-title">用户列表</h3>
										</div>
										<div class="panel-body">
											<div class="row"
												style="margin: 15px 15px 0 15px; border: 2px solid #ededed;">
												<div class="col-md-9 col-sm-9 col-xs-12 form-group"
													style="margin-top: 15px;">
													<div class="col-md-6 col-sm-6 col-xs-12 input-group">
														<span class="input-group-addon">姓名</span>
														<input class="form-control" style="width:150px"
															placeholder="请输入姓名" id="nameInput">
														<span class="input-group-addon">地址</span>
														<input class="form-control" style="width:150px"
															placeholder="请输入地址" id="addrInput">
														<span class="input-group-addon">电话</span>
														<input class="form-control" style="width:150px"
															placeholder="请输入电话" id="phoneInput">
													</div>
												</div>
												<div class="col-md-1 col-sm-1 col-xs-1 form-group"
													style="margin-top: 15px;">
													<a href="javascript:;" id="search_btn" class="btn btn-success"
														style="text-decoration: none;">搜索</a>
												</div>
												<div class="col-md-1 col-sm-1 col-xs-1 form-group"
													style="margin-top: 15px;">
													<a href="javascript:;" id="clear_btn" class="btn btn-info"
														style="text-decoration: none;">重置</a>
												</div>
											</div>
											<div class="row" style="margin: 15px;">
												<div class="col-md-13 col-sm-13 col-xs-13">
													<table class="table" id="mytable"></table>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
<script>
$(function () {
	TableObj.oTableInit();
});

var TableObj = { 
		//初始化Table
		oTableInit:function () {
		$("#mytable").bootstrapTable({
			url: "users",   //请求地址
			method: "get",  // 请求方式
			striped: true, //是否显示行间隔色
			pageNumber: 1, //初始化加载第一页
			pagination: true,//是否分页
			sidePagination: 'server',//server:服务器端分页|client：前端分页
			pageSize: 5,//单页记录数
			pageList: [5, 10, 20],//可选择单页记录数
			showRefresh: true,//刷新按钮
			queryParamsType: "", //查询参数类型,设置为空
			queryParams: function (params) {//上传服务器的参数
				var temp = {
					size: params.pageSize,// 每页显示数量
					page: params.pageNumber, //页码 
					sortName: params.sortName, //排序列
					sortOrder: params.sortOrder,  //升序or降序
					searchName:$.trim($("#nameInput").val()),
					searchAddr:$.trim($("#addrInput").val()),
					searchPhone:$.trim($("#phoneInput").val())    
				};
				return temp;
			}, columns: [{
				title: '编号',
				field: 'id',
				sortable: true
			}, {
				title: '用户姓名',
				field: 'userName',
				sortable: true
			}, {
				title: '登录密码',
				field: 'password',
				sortable: true
			}, {
				title: '地址',
				field: 'address',
				sortable: true
			}, {
				title: '电话',
				field: 'phone',
				sortable: true
			}, {
				title: '部门',
				field: 'dept.deptName',
				sortable: true
			}]
		})
	}
};
	// 搜索
	$('#search_btn').on('click', function() {

		$('#mytable').bootstrapTable('destroy');
		TableObj.oTableInit();
	});
	// 重置
	$('#clear_btn').on('click', function () {
		$("input").val("");
		$("select").val("");
		$('#search_btn').click();
	});
</script>
</body>

</html>